<template>
  <div class="setup">
	<el-card class="box-card">
  		<el-collapse v-model="activeName" accordion>
			<el-collapse-item title="修改密码" name="1" >
				<div class="password">
					<el-input v-model="originalPassword" type="tel" clearable placeholder="请输入密码"><template slot="prepend">原密码</template></el-input>
				</div>
				<div class="password">
					<el-input v-model="preNewPassword" clearable placeholder="请输入新密码"><template slot="prepend">新密码</template></el-input>
				</div>
				<div class="password">
					<el-input v-model="nextNewPassword" clearable placeholder="请输入新密码"><template slot="prepend">新密码</template></el-input>
				</div>
				<div class="password">
					<el-button plain @click="reset">撤销</el-button>
					<el-button type="success" smart @click="saveFn">保存</el-button>
				</div>
			</el-collapse-item>
	</el-collapse>
	</el-card>
  </div>
</template>

<script>
import { loginApi  } from '@/api/table'
export default {
  data() {
    return {
      	originalPassword:"",
      	preNewPassword:"",
      	nextNewPassword:"",
      	activeName:['1'],
    }
  },
  methods:{
    reset(){
    	this.originalPassword="";
      	this.preNewPassword="";
      	this.nextNewPassword="";
    },
    saveFn(){
    	if(this.originalPassword==""||this.preNewPassword==""||this.nextNewPassword==""){
    		this.$message({
                showClose: true,
                message: '请输入密码',
                type: 'warning'
             });
    		return false
    	}
    	if(this.preNewPassword!=this.nextNewPassword){
    		this.$message({
                showClose: true,
                message: '新密码不一致',
                type: 'warning'
             });
    		this.preNewPassword=""
    		this.nextNewPassword=""
    		return false
    	}
    	this.$confirm('您确定要保存您修改的新密码吗？','保存密码', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
         .then(() => {
         	let msg = {
         		oldPwd:this.originalPassword,
         		newPwd:this.preNewPassword
         	}
           	loginApi.resetPwd(msg)
            .then(data=>{
               console.log(data)
               this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
             });
            })
            .catch(error => {
                console.error(error)
            })

          })
      .catch(action => {
        
      });
    },
  }
}
</script>
<style>
	.setup .el-collapse-item__header{
		color: #909399;
		font-size: 14px;
		text-align: center;
	}
</style>
<style scoped lang="scss">
	.box-card{
		width: 100%;
		height:100%;
		min-height: 500px;
		margin:10px;
	}
	.setup .el-input-group{
		width:30%;
	}
	.password{
		margin-bottom:20px;
		text-align: center;
	}
</style>

